<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/TeacherMain' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>教师管理</el-breadcrumb-item>
  <el-breadcrumb-item>教师信息</el-breadcrumb-item>
</el-breadcrumb>
<el-row :gutter="20">
<el-col :span="7"><el-input placeholder="请输入查找的id" v-model="form.id">
    <el-button slot="append" icon="el-icon-search" @click="find(form.id)"></el-button>
  </el-input></el-col>
<el-col :span="4"><el-button type="info" @click="back" size="small">返回</el-button></el-col>
</el-row>
 <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column type="index" width="100"></el-table-column>
    <el-table-column
      prop="id"
      label="工号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="teachername"
      label="教师姓名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="teacherage"
      label="教师年龄"
      width="200">
    </el-table-column>
    <el-table-column
      prop="teacherclass"
      label="教授班级"
      width="200">
    </el-table-column>
    <el-table-column
      prop="teacherscore"
      label="班级成绩"
      width="200">
    </el-table-column>
    <el-table-column
      prop="teacheraddress"
      label="教师住址"
      width="200">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button icon="el-icon-edit" @click="showid(scope.row.id)" type="primary" size="small">修改</el-button>
        <el-button icon="el-icon-delete"  @click="deleteid(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 <el-pagination
   background
  layout="prev, pager, next"
  :page-size='pagesize'
  :total="total"
  @current-change="page">
</el-pagination>
<!--修改用户 -->
<el-dialog
  title="修改教师信息" :visible.sync="edidialogVisible"
  width="50%">
  <el-form :model="edidFrom" ref="edidFromRef" label-width="70px">
  <el-form-item label="工号" >
    <el-input v-model="edidFrom.id" disabled></el-input>
  </el-form-item>
  <el-form-item label="教师姓名" >
    <el-input v-model="edidFrom.teachername"></el-input>
  </el-form-item>
  <el-form-item label="教师年龄" >
    <el-input v-model="edidFrom.teacherage"></el-input>
  </el-form-item>
  <el-form-item label="教授班级" >
    <el-input v-model="edidFrom.teacherclass"></el-input>
  </el-form-item>
  <el-form-item label="班级成绩" >
    <el-input v-model="edidFrom.teacherscore"></el-input>
  </el-form-item>
  <el-form-item label="教师住址" >
    <el-input v-model="edidFrom.teacheraddress"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="edidialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updata('edidFrom')">修改</el-button>
  </span>
</el-dialog>
<!--查询-->
<el-dialog
  title="查询教师信息" :visible.sync="asd"
  width="50%">
  <el-form :model="form" ref="edidFromRef" label-width="70px">
  <el-form-item label="工号" >
    <el-input v-model="form.id" disabled></el-input>
  </el-form-item>
  <el-form-item label="教师姓名" >
    <el-input v-model="form.teachername"></el-input>
  </el-form-item>
  <el-form-item label="教师年龄" >
    <el-input v-model="form.teacherage"></el-input>
  </el-form-item>
  <el-form-item label="教授班级" >
    <el-input v-model="form.teacherclass"></el-input>
  </el-form-item>
  <el-form-item label="班级成绩" >
    <el-input v-model="form.teacherscore"></el-input>
  </el-form-item>
  <el-form-item label="教师住址" >
    <el-input v-model="form.teacheraddress"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
  </span>
</el-dialog>
</div>
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    deleteid (row) {
      this.$confirm('此操作将永久删除该教师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:8082/StudentManagement-Web/teacher/delete/${row.id}.json`).then(function (resp) { alert('删除成功') })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    edid (row) {
      this.$router.push({
        path: '/Updata',
        query: {
          id: row.id
        }
      })
    },
    page (currentPage) {
      const _this = this
      axios.get(`http://localhost:8082/StudentManagement-Web/teacher/findall/${currentPage}/2.json`).then(function (resp) { _this.tableData = resp.data.content; _this.total = resp.data.totalElements })
    },
    back () {
      this.$router.replace('/Home')
    },
    show (row) {
      console.log(row)
      const _this = this
      axios.get('http://localhost:localhost:8082/StudentManagement-Web/teacher/17.json').then(function (resp) { _this.tableData = resp.data })
      this.edidialogVisible = true
    },
    showid (id) {
      console.log(id)
      const _this = this
      this.edidialogVisible = true
      axios.get(`http://localhost:8082/StudentManagement-Web/teacher/findbyid/${id}.json`, this.edidFrom).then(function (res) { _this.edidFrom = res.data; console.log(_this.edidFrom.name) })
    },
    updata () {
      this.$refs.edidFromRef.validate((valid) => {
        if (valid) {
          axios.put('http://localhost:8082/StudentManagement-Web/teacher/updata.json', this.edidFrom).then(function (resp) { alert('success') })
        } else {
          console.log('失败!!')
          return false
        }
      })
    },
    find (id) {
      console.log(id)
      const _this = this
      this.asd = true
      axios.get(`http://localhost:8082/StudentManagement-Web/teacher/findbyid/${id}.json`, this.form).then(function (res) { _this.form = res.data })
    }
  },
  created () {
    const _this = this
    axios.get('http://localhost:8082/StudentManagement-Web/teacher/findall/1/2.json').then(function (resp) { _this.tableData = resp.data.content; _this.total = resp.data.totalElements })
  },
  data () {
    return {
      total: null,
      tableData: null,
      edidialogVisible: false,
      edidFrom: {},
      pagesize: 2,
      form: {},
      asd: false,
      loading: false
    }
  }
}
</script>
